<html>
<head>
<title>4Playas</title>
<link rel="stylesheet" type="text/css"
	href="http://fonts.googleapis.com/css?family=Philosopher|Cantarell">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>

<body onload="createMap(); centerMap(40.24, -3.41); showMarkersInMap();">
	<% beaches.each { beach -> %>
		<g:set var="beachId" value="${beach.id}" />
		<g:set var="link" value="${createLink(controller: 'beachWeb', action: 'get', params: [beachId: beachId])}" />
		<script language='javascript'>
			addMarker ("<%=beach.name%>", "<%=beach.latitude%>", "<%=beach.longitude%>", "${link}") ;
		</script>
      <%}%>

	<div id="header">
		4Playas
	</div>

	<div id="map">
	</div>

	<div id="search">
		<g:form url='[controller: "searchable", action: "index"]'
			id="searchableForm" name="searchableForm" method="get">
			<g:textField name="q" value="${params.q}" size="50" />
			<input type="submit" value="Buscar" />
		</g:form>
	</div>

	<div id="main">
		<g:set var="haveQuery" value="${params.q?.trim()}" />
		<g:set var="haveResults" value="${searchResult?.results}" />
		<div class="title">
			<span> <g:if test="${haveQuery && haveResults}">
	          Resultados <strong> ${searchResult.offset + 1} </strong> - <strong>
						${searchResult.results.size() + searchResult.offset} </strong> de <strong>
						${searchResult.total} </strong>
	          para <strong> ${params.q} </strong>
				</g:if> <g:else>
	        &nbsp;
	        </g:else> </span>
		</div>

		<g:if test="${haveQuery && !haveResults && !parseException}">
			<p>
				No se han encontrado resultados para <strong> ${params.q} </strong>
			</p>
		</g:if>

		<g:if test="${parseException}">
			<p>
				La b&uacute;squeda - <strong> ${params.q} </strong> - no es
				v&aacute;lida
			</p>
		</g:if>

		<g:if test="${haveResults}">
			<div class="results">
				<g:each var="beach" in="${searchResult.results}" status="index">
					<div class="result">
						<g:set var="beachId" value="${beach.id}" />
						<g:set var="link"
							value="${createLink(controller: 'beachWeb', action: 'get', params: [beachId: beachId])}" />
						<a href="${link}"> ${beach.name}<em>, ${beach.town.name}, ${beach.town.province.name},
								${beach.town.province.country.name} </em> </a>
						<script language='javascript'>
				addMarker ("<%=beach.name%>", "<%=beach.latitude%>", "<%=beach.longitude%>", "${link}") ;
			</script>
					</div>
				</g:each>
			</div>

			<div>
				<div class="paging">
					<g:set var="totalPages"
						value="${Math.ceil(searchResult.total / searchResult.max)}" />
					<g:if test="${totalPages > 1}">
						<g:paginate controller="searchable" action="index"
							params="[q: params.q, offset: params.offset]"
							total="${searchResult.total}" prev="&lt;" next="&gt;" />
					</g:if>
				</div>
			</div>
		</g:if>
	</div>

	<div id="beach">
		<g:if test="${beach}">
			<script language='javascript'>
				addMarker("<%=beach.name%>", "<%=beach.latitude%>", "<%=beach.longitude%>");
			</script>
			<img src="images/beaches/img${beach.photo}_s.jpg" alt="${beach.name}" />
			<strong> ${beach.name}
					<br />
					<em>${beach.town.name}, ${beach.town.province.name},
					${beach.town.province.country.name} </em>
			</strong>
			<p>
				${beach.description}
			</p>
			<dl>
				<dt>Longitud</dt>
				<dd>
					${beach.length}m
				</dd>
				<dt>Anchura media</dt>
				<dd>
					${beach.mediumWidth}m
				</dd>
				<dt>Grado de ocupaci&oacute;n</dt>
				<dd>
					${beach.occupation}
				</dd>
				<dt>Grado de urbanizaci&oacute;n</dt>
				<dd>
					${beach.urbanization}
				</dd>
				<dt>Composici&oacute;n</dt>
				<dd>
					${beach.composition}
				</dd>
				<dt>Tipo de arena</dt>
				<dd>
					${beach.sandType}
				</dd>
				<dt>Condiciones de ba&ntilde;o</dt>
				<dd>
					${beach.bathingConditions}
				</dd>
			</dl>
			<ul>
				<g:if test="${beach.promenade}">
					<li>Paseo mar&iacute;timo</li>
				</g:if>
				<g:if test="${beach.anchorageArea}">
					<li>Zona de fondeo</li>
				</g:if>
				<g:if test="${beach.nudist}">
					<li>Nudista</li>
				</g:if>
				<g:if test="${beach.vegetation}">
					<li>Presencia de vegetaci&oacute;n</li>
				</g:if>
				<g:if test="${beach.protectedArea}">
					<li>Zona protegida</li>
				</g:if>
				<g:if test="${beach.blueFlag}">
					<li>Bandera azul</li>
				</g:if>
				<g:if test="${beach.accessSignaling}">
					<li>Se&ntilde;alizaci&oacute;n de los accesos</li>
				</g:if>
				<g:if test="${beach.disabledAccess}">
					<li>Accesos minusv&aacute;lidos</li>
				</g:if>
				<g:if test="${beach.toilets}">
					<li>Aseos</li>
				</g:if>
				<g:if test="${beach.showers}">
					<li>Duchas</li>
				</g:if>
				<g:if test="${beach.phone}">
					<li>Tel&eacute;fono</li>
				</g:if>
				<g:if test="${beach.paperBin}">
					<li>Papeleras</li>
				</g:if>
				<g:if test="${beach.cleaningService}">
					<li>Servicio de limpieza</li>
				</g:if>
				<g:if test="${beach.gateways}">
					<li>Pasarelas de acceso</li>
				</g:if>
				<g:if test="${beach.umbrellasRental}">
					<li>Alquiler de sombrillas</li>
				</g:if>
				<g:if test="${beach.sunbedRental}">
					<li>Alquiler de hamacas</li>
				</g:if>
				<g:if test="${beach.yatchRental}">
					<li>Alquiler de na&uacute;ticos</li>
				</g:if>
				<g:if test="${beach.spaKiosks}">
					<li>Quioscos balnearios</li>
				</g:if>
				<g:if test="${beach.yatchClub}">
					<li>Club na&uacute;tico</li>
				</g:if>
				<g:if test="${beach.divingArea}">
					<li>Zona de submarinismo</li>
				</g:if>
			</ul>
		</g:if>
	</div>

	<div id="footer">FourCitizens</div>
</body>
</html>